/* eslint-disable @typescript-eslint/no-shadow */
import React from 'react';

import { IconColor } from '../../../helpers/constants/design-system';

import type {
  StyleUtilityProps,
  PolymorphicComponentPropWithRef,
} from '../box';

/**
 * @deprecated This type has been deprecated in favor of the one from @metamask/design-system-react
 */
export enum IconSize {
  Xs = 'xs',
  Sm = 'sm',
  Md = 'md',
  Lg = 'lg',
  Xl = 'xl',
  Inherit = 'inherit',
}

/**
 * The IconName enum contains all the possible icon names.
 *
 * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story
 *
 * Add an icon: https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#adding-a-new-icon
 *
 * @deprecated This type has been deprecated in favor of the one from @metamask/design-system-react
 */

export enum IconName {
  Accessibility = 'accessibility',
  Activity = 'activity',
  AddCard = 'add-card',
  AddCircle = 'add-circle',
  AddSquare = 'add-square',
  Add = 'add',
  Ai = 'ai',
  AlternateEmail = 'alternate-email',
  Apple = 'apple',
  Apps = 'apps',
  Arrow2Down = 'arrow-2-down',
  Arrow2Left = 'arrow-2-left',
  Arrow2Right = 'arrow-2-right',
  Arrow2UpRight = 'arrow-2-up-right',
  Arrow2Up = 'arrow-2-up',
  ArrowCircleDown = 'arrow-circle-down',
  ArrowCircleUp = 'arrow-circle-up',
  ArrowDoubleLeft = 'arrow-double-left',
  ArrowDoubleRight = 'arrow-double-right',
  ArrowDown = 'arrow-down',
  ArrowDropDownCircle = 'arrow-drop-down-circle',
  ArrowLeft = 'arrow-left',
  ArrowRight = 'arrow-right',
  ArrowUp = 'arrow-up',
  Attachment = 'attachment',
  Ban = 'ban',
  BankAssured = 'bank-assured',
  Bank = 'bank',
  Bold = 'bold',
  Book = 'book',
  Bookmark = 'bookmark',
  Bridge = 'bridge',
  Briefcase = 'briefcase',
  Bulb = 'bulb',
  BuySell = 'buy-sell',
  Cake = 'cake',
  Calculator = 'calculator',
  Calendar = 'calendar',
  Call = 'call',
  Camera = 'camera',
  Campaign = 'campaign',
  CardPos = 'card-pos',
  Card = 'card',
  Cash = 'cash',
  Category = 'category',
  Chart = 'chart',
  CheckBold = 'check-bold',
  Check = 'check',
  CircleX = 'circle-x',
  ClockFilled = 'clock-filled',
  Clock = 'clock',
  Close = 'close',
  CloudDownload = 'cloud-download',
  CloudUpload = 'cloud-upload',
  Cloud = 'cloud',
  CodeCircle = 'code-circle',
  Code = 'code',
  Coin = 'coin',
  Collapse = 'collapse',
  Confirmation = 'confirmation',
  Connect = 'connect',
  CopySuccess = 'copy-success',
  Copy = 'copy',
  CreditCheck = 'credit-check',
  CurrencyFranc = 'currency-franc',
  CurrencyLira = 'currency-lira',
  CurrencyPound = 'currency-pound',
  CurrencyYuan = 'currency-yuan',
  Customize = 'customize',
  Danger = 'danger',
  DarkFilled = 'dark-filled',
  Dark = 'dark',
  Data = 'data',
  Description = 'description',
  Details = 'details',
  Diagram = 'diagram',
  DocumentCode = 'document-code',
  Dollar = 'dollar',
  Download = 'download',
  Draft = 'draft',
  EcoLeaf = 'eco-leaf',
  EditSquare = 'edit-square',
  Edit = 'edit',
  EncryptedAdd = 'encrypted-add',
  Eraser = 'eraser',
  Error = 'error',
  Ethereum = 'ethereum',
  Exchange = 'exchange',
  ExpandVertical = 'expand-vertical',
  Expand = 'expand',
  ExploreFilled = 'explore-filled',
  Explore = 'explore',
  Export = 'export',
  Extension = 'extension',
  EyeSlash = 'eye-slash',
  Eye = 'eye',
  FaceId = 'face-id',
  Feedback = 'feedback',
  File = 'file',
  Filter = 'filter',
  Fingerprint = 'fingerprint',
  Fire = 'fire',
  FirstPage = 'first-page',
  Flag = 'flag',
  FlashSlash = 'flash-slash',
  Flash = 'flash',
  Flask = 'flask',
  Flower = 'flower',
  Folder = 'folder',
  Forest = 'forest',
  FullCircle = 'full-circle',
  Gas = 'gas',
  Gift = 'gift',
  GlobalSearch = 'global-search',
  Global = 'global',
  Graph = 'graph',
  Hardware = 'hardware',
  HashTag = 'hash-tag',
  HeartFilled = 'heart-filled',
  Heart = 'heart',
  Hierarchy = 'hierarchy',
  HomeFilled = 'home-filled',
  Home = 'home',
  Image = 'image',
  Info = 'info',
  Inventory = 'inventory',
  Joystick = 'joystick',
  KeepFilled = 'keep-filled',
  Keep = 'keep',
  Key = 'key',
  LastPage = 'last-page',
  LightFilled = 'light-filled',
  Light = 'light',
  Link = 'link',
  Loading = 'loading',
  Location = 'location',
  LockSlash = 'lock-slash',
  Lock = 'lock',
  LockedFilled = 'locked-filled',
  Login = 'login',
  Logout = 'logout',
  Mail = 'mail',
  Map = 'map',
  Menu = 'menu',
  MessageQuestion = 'message-question',
  Messages = 'messages',
  Mic = 'mic',
  MinusBold = 'minus-bold',
  MinusSquare = 'minus-square',
  Minus = 'minus',
  Mobile = 'mobile',
  MoneyBag = 'money-bag',
  Money = 'money',
  Monitor = 'monitor',
  MoreHorizontal = 'more-horizontal',
  MoreVertical = 'more-vertical',
  MountainFlag = 'mountain-flag',
  MusicNote = 'music-note',
  Notification = 'notification',
  PageInfo = 'page-info',
  Palette = 'palette',
  PasswordCheck = 'password-check',
  Pending = 'pending',
  People = 'people',
  PersonCancel = 'person-cancel',
  Pin = 'pin',
  Plant = 'plant',
  Plug = 'plug',
  PlusAndMinus = 'plus-and-minus',
  PolicyAlert = 'policy-alert',
  Popup = 'popup',
  Print = 'print',
  PriorityHigh = 'priority-high',
  PrivacyTip = 'privacy-tip',
  ProgrammingArrows = 'programming-arrows',
  Publish = 'publish',
  QrCode = 'qr-code',
  Question = 'question',
  Receive = 'receive',
  Received = 'received',
  Refresh = 'refresh',
  RemoveMinus = 'remove-minus',
  Report = 'report',
  Rocket = 'rocket',
  SaveFilled = 'save-filled',
  Save = 'save',
  Saving = 'saving',
  ScanBarcode = 'scan-barcode',
  ScanFocus = 'scan-focus',
  Scan = 'scan',
  Search = 'search',
  SecurityAlert = 'security-alert',
  SecurityCross = 'security-cross',
  SecurityKey = 'security-key',
  SecuritySearch = 'security-search',
  SecuritySlash = 'security-slash',
  SecurityTick = 'security-tick',
  SecurityTime = 'security-time',
  SecurityUser = 'security-user',
  Security = 'security',
  Send = 'send',
  SentimentDissatisfied = 'sentiment-dissatisfied',
  SentimentNeutral = 'sentiment-neutral',
  SentimentSatisfied = 'sentiment-satisfied',
  SentimentVerySatisfied = 'sentiment-very-satisfied',
  SettingFilled = 'setting-filled',
  Setting = 'setting',
  Share = 'share',
  ShieldLock = 'shield-lock',
  ShoppingBag = 'shopping-bag',
  ShoppingCart = 'shopping-cart',
  Sidepanel = 'sidepanel',
  SignalCellular = 'signal-cellular',
  Slash = 'slash',
  Sms = 'sms',
  SnapsMobile = 'snaps-mobile',
  SnapsPlus = 'snaps-plus',
  SnapsRound = 'snaps-round',
  Snaps = 'snaps',
  SortByAlpha = 'sort-by-alpha',
  Sort = 'sort',
  Sparkle = 'sparkle',
  Speed = 'speed',
  Speedometer = 'speedometer',
  Square = 'square',
  Stake = 'stake',
  StarFilled = 'star-filled',
  Star = 'star',
  Start = 'start',
  Storefront = 'storefront',
  Student = 'student',
  SwapHorizontal = 'swap-horizontal',
  SwapVertical = 'swap-vertical',
  TabClose = 'tab-close',
  TableRow = 'table-row',
  Tablet = 'tablet',
  Tag = 'tag',
  ThumbDownFilled = 'thumb-down-filled',
  ThumbDown = 'thumb-down',
  ThumbUpFilled = 'thumb-up-filled',
  ThumbUp = 'thumb-up',
  Tint = 'tint',
  Tooltip = 'tooltip',
  Translate = 'translate',
  Trash = 'trash',
  TrendDown = 'trend-down',
  TrendUp = 'trend-up',
  TriangleUp = 'triangle-up',
  TriangleDown = 'triangle-down',
  Undo = 'undo',
  Unfold = 'unfold',
  UnlockedFilled = 'unlocked-filled',
  Unpin = 'unpin',
  UploadFile = 'upload-file',
  Upload = 'upload',
  Usb = 'usb',
  UserCheck = 'user-check',
  UserCircleAdd = 'user-circle-add',
  UserCircleRemove = 'user-circle-remove',
  UserCircle = 'user-circle',
  User = 'user',
  VerifiedFilled = 'verified-filled',
  Verified = 'verified',
  Videocam = 'videocam',
  ViewColumn = 'view-column',
  ViewInAr = 'view-in-ar',
  VolumeOff = 'volume-off',
  VolumeUp = 'volume-up',
  WalletFilled = 'wallet-filled',
  Wallet = 'wallet',
  Warning = 'warning',
  WebTraffic = 'web-traffic',
  Widgets = 'widgets',
  WifiOff = 'wifi-off',
  Wifi = 'wifi',
  X = 'x',
}

// TODO: Convert to a `type` in a future major version.
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
export interface IconStyleUtilityProps extends StyleUtilityProps {
  /**
   * The name of the icon to display. Use the IconName enum
   * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story
   */
  name: IconName;
  /**
   * The size of the Icon.
   * Possible values could be IconSize.Xs (12px), IconSize.Sm (16px), IconSize.Md (20px), IconSize.Lg (24px), IconSize.Xl (32px), IconSize.Inherit (inherits font-size).
   * Default value is IconSize.Md (20px).
   */
  size?: IconSize;
  /**
   * The color of the icon.
   * Defaults to IconColor.inherit.
   */
  color?: IconColor;
  /**
   * An additional className to apply to the icon.
   */
  className?: string;
  /**
   * Addition style properties to apply to the icon.
   * The Icon component uses inline styles to apply the icon's mask-image so be wary of overriding
   */
  style?: React.CSSProperties;
}

// TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
// eslint-disable-next-line @typescript-eslint/naming-convention
export type IconProps<C extends React.ElementType> =
  PolymorphicComponentPropWithRef<C, IconStyleUtilityProps>;

// TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
// eslint-disable-next-line @typescript-eslint/naming-convention
export type IconComponent = <C extends React.ElementType = 'span'>(
  props: IconProps<C>,
) => React.ReactElement | null;
